// 将组件 (components) 映射到路由 (routes)，
// 然后告诉 Vue Router 在哪里渲染它们

// 第一步, 导入Vue和VueRouter，调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import BMI from "@/pages/App";
import Meizi from "@/pages/GanHuo";
import GanHuoDetail from "@/pages/GanHuoDetail";
import Home from "@/pages/Home";
import User from "@/pages/User";
import NotFound from "@/pages/NotFound";

// 第二步, 创建 router 实例
export default new VueRouter({
  mode: 'history', // hash
  routes: [
    // / -> /
    // /home -> /
    {
      path: '/home',
      // redirect: '/'
      redirect: {
        name: 'home'
      }
    },
    {
      path: '/',
      component: Home,
      name: 'home',
    },
    {
      path: '/bmi',
      component: BMI,
      name: 'bmi'
    },
    {
      path: '/meizi/:id',
      name: 'meizi-detail',
      component: GanHuoDetail
    },
    {
      path: '/meizi',
      name: 'meizi',
      component: Meizi
    },
    {
      // 动态路由匹配 /:id
      path: '/user/:uname/',
      name: 'user',
      component: User
    },
    {
      path: '*',
      name: 'not-found',
      component: NotFound
    }
  ]
})


/*
* hash
* http://localhost:8080/#/
* http://localhost:8080/#/meizi
*
* history
* http://localhost:8080/
* http://localhost:8080/bmi
*
*
* https://gank.io/post/<objectId>
* https://gank.io/post/5e93274b17bf93950887f202
* https://gank.io/post/5e72298f235c6b4a5cb269ee
* */
